<template>
	<view class="layout">
		<view :style="{height: height + 'px'}"></view>
		<!-- 年级 -->
		<view class="grade-list">
			<view :class="['list-item', {'active-item':gradeType === grade.type}]" 
				v-for="(grade, gIndex) in gradeList" :key="gIndex"
				@click="gradeClick(grade.type)"
			>{{grade.name}}</view>
		</view>
		<view class="course-content" :style="{height: 'calc(100vh - var(--window-top) - var(--window-bottom) - 114rpx - ' + height + 'px)'}">
			<!-- 版本 -->
			<view class="publish-content">
				<view :class="['publish-item', {'active-pub':versionId === version.version_id}]" 
					v-for="(version, vIndex) in versionList" :key="vIndex"
					@click="versionClick(version.version_id)"
				>{{version.version_name}}</view>
			</view>
			<!-- 教材 -->
			<view class="course-box">
				<z-paging :fixed="false" ref="paging" v-model="bookList" @query="queryList">
					<view class="course-list">
						<view class="course-item" @click="isShow = true" v-for="(book, bIndex) in bookList" :key="bIndex">
							 <image :src="book.book_img" mode=""></image>
							 <view class="text">{{book.book_name}}</view>
						 </view>
					</view>
				</z-paging>
			</view>
		</view>
		
		<view class="model d-c-c" v-show="isShow" @click="isShow=false">
			<view class="">
				<view class="model-box">
					<view class="close" @click="isShow=false">
						<u-icon color="#fff" size="40" name="close"></u-icon>
					</view>
					<image src="/static/index1/21.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			height: {
				type: [Number, String],
				default: 0
			}
		},
		data() {
			return {
				gradeType: '',
				gradeList: [],
				versionId: 0,
				versionList: [],
				bookList: [],
				isShow:false,
			};
		},
		mounted() {
			this.getGradeList()
		},
		methods: {
			// 获取年级列表
			getGradeList() {
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				this.$u.post(this.$u.api.gradeType, {}).then((res) => {
					uni.hideLoading()
					if (res.code == 1) {
						this.gradeList = res.data
						this.gradeType = this.gradeList[0].type
						this.getBookVersion()
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch((err) => {
					uni.hideLoading()
					uni.showToast({
						title: err.data.msg,
						icon: 'none'
					})
				})
			},
			// 年级点击事件
			gradeClick(type) {
				this.gradeType = type
				this.getBookVersion()
			},
			// 获取教材版本
			getBookVersion() {
				this.$u.post(this.$u.api.versionList, {
					grade: this.gradeType,
				}).then((res) => {
					if (res.code == 1) {
						this.versionList = res.data
						this.versionId = res.data[0].version_id
						this.$refs.paging.reload()
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch((err) => {
					uni.showToast({
						title: err.data.msg,
						icon: 'none'
					})
				})
			},
			// 版本点击
			versionClick(versionId) {
				this.versionId = versionId
				this.$nextTick(() => {
					this.$refs.paging.reload()
				})
			},
			// 获取教材列表
			queryList(pageNo, pageSize) {
				this.$u.post(this.$u.api.bookList, {
					pageNo: pageNo,
					pageSize: pageSize,
					version: this.versionId,
				}).then((res) => {
					if (res.code == 1) {
						this.$refs.paging.complete(res.data.data)
					} else {
						this.$refs.paging.complete(false)
					}
				}).catch((err) => {
					this.$refs.paging.complete(false)
				})
			},
			goPage(page) {
				if (page) {
					uni.reLaunch({
						url: page,
					})
				}
			},
		},
	}
</script>

<style lang="less" scoped>
	.layout{
		width: 100%;
	}
	.grade-list{
		width: calc(100% - 40rpx);
		margin: 0 20rpx 40rpx;
		box-sizing: border-box;
		overflow-x: scroll;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		flex-wrap: nowrap;
		
		.list-item{
			height: 74rpx;
			margin: 0 10rpx;
			padding: 0 10rpx;
			box-sizing: border-box;
			font-size: 28rpx;
			text-align: center;
			line-height: 74rpx;
			white-space: nowrap;
		}
		
		.active-item{
			border-bottom: 4rpx solid #4BB0FF;
		}
		
	}
	
	.course-content{
		display: flex;
		
		.publish-content{
			width: 250rpx;
			height: 100%;
			overflow-y: scroll;
			
			.publish-item{
				height: 70rpx;
				text-align: center;
				line-height: 70rpx;
				cursor: pointer;
				&:hover{
					background: rgba(75,176,255,0.5);
				}
			}
			
			.active-pub{
				background: #4BB0FF;
				color:#fff;
			}
			
		}
		
		.course-box{
			width: calc(100% - 250rpx);
			height: 100%;
			overflow-y: scroll;
		}
		
		.course-list{
			width: calc(100% - 30rpx);
			height: 100%;
			margin: 0 15rpx;
			box-sizing: border-box;
			display: flex;
			flex-wrap: wrap;

			.course-item{
				width: calc(50% - 30rpx);
				margin: 0 15rpx 30rpx;
				text-align: center;
				transition:all 0.1s linear;
				&:hover{
					cursor: pointer;
					box-shadow: 0 10rpx 10rpx #ccc;
					transform: translateY(-10rpx);
				}
				
				image{
					display: block;
					width: 210rpx;
					height: 280rpx;
					margin: 0 auto;
				}
				
				.text{
					font-size: 24rpx;
					margin-top: 20rpx;
				}
				
			}
		}
	
	}
	
	.model{
		position: absolute;
		z-index: 99;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		background-color: rgba(0,0,0,0.3);
		.model-box{
			z-index: 1000;
			position: relative;
			.close{
				position: absolute;
				right: 0;
				top: 0;
			}
			
			image{
				width: 528rpx;
			}
		}
		
	}
</style>
